<script setup lang="ts">
import {ref} from "vue";
//导入 router
import {useRouter} from "vue-router";
const router = useRouter()

// 分页相关参数
const currentPage = ref(1)
const pageSize = ref(100)
const  background = ref(true)

const tableData = ref([
  {
    id: 1,
    title: "秋月梨精选大果",
    content: "团购内容1",
  },
  {
    id: 2,
    title: "团购标题2",
    content: "团购内容2",
  }
])

// 编辑团购信息
const eidt = () => {
  //使用 vue router 进行跳转
  router.push('/product/purchase/edit')
}
</script>

<template>
  <div class="header_button">
    <el-button icon="Plus" type="primary">添加团购</el-button>
  </div>

  <el-card style="max-width: 100%">
    <el-table border :data="tableData">
      <el-table-column label="序号" width="80px" prop="id"></el-table-column>
      <el-table-column label="团购标题" prop="title"></el-table-column>
      <el-table-column label="团购内容" prop="content"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small">操作</el-button>
          <el-button type="primary" size="small" @click="eidt">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
          <el-button type="info" size="small">预览</el-button>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 100]"
          :background="background"
          layout="sizes,prev, pager, next, ->, total,jumper "
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </template>
  </el-card>
</template>

<style scoped lang="scss">

.header_button {
  margin: 0 0 20px 0;
}
</style>
